<template>
  <el-card class="page-container">
    <template #header>
      <div class="header">
        <span>
          <h2>休假记录</h2>
        </span>
      </div>
    </template>
    <el-table :data="vocations" style="width: 100%; border: 1px solid #dcdcdc;">
      <el-table-column label="申请人" prop="empName" width="150px"></el-table-column>
      <el-table-column label="假期类型" prop="vocationTypeName"></el-table-column>
      <el-table-column label="时长" prop="days"> </el-table-column>
      <el-table-column label="开始时间" prop="startTime"></el-table-column>
      <el-table-column label="结束时间" prop="endTime"></el-table-column>
      <el-table-column label="状态" prop="approveStatus" ></el-table-column>
      <template #empty>
        <el-empty description="没有数据" />
      </template>
    </el-table>
    <!-- 分页条 -->
    <el-pagination v-model:current-page="pageNum" v-model:page-size="pageSize" :page-sizes="[3, 5, 10, 15]"
      layout="jumper, total, sizes, prev, pager, next" background :total="total" @size-change="onSizeChange"
      @current-change="onCurrentChange" style="margin-top: 20px; justify-content: flex-end" />

  </el-card>

</template>
<script setup lang="ts">
import { ref  } from 'vue'
import { getVocations } from '../api'
import type { Vocation } from '../model'
import { useEmpStore } from '../store/emp'
import { storeToRefs } from 'pinia'

const store = useEmpStore()
const { empInfo } = storeToRefs(store)
let pageNum = ref(1)
let pageSize = ref(10)

console.log(empInfo.value);

let vocations = ref<Vocation[]>([])
let total = ref(0)
let param = ref({
  offset: 0,
  limit: 10,
  empId: empInfo.value!.id,

})


const showVocations = async () => {
  console.log(empInfo.value);
  console.log(param.value);
  getVocations(param.value).then(res => {
    vocations.value = res.t.vocations
    total.value = res.t.total
  })
}
showVocations();

//当每页条数发生了变化，调用此函数
const onSizeChange = (size: number) => {
  param.value.limit = size
  showVocations();
}
//当前页码发生变化，调用此函数
const onCurrentChange = (num: number) => {
  param.value.offset = (num - 1) * param.value.limit,
    showVocations();
}


</script>
<style scoped></style>
